<template>
  <view class="all-truck-img">
    <view class="all-item">
      <view class="all-title">
        <view class="left-line"></view>
        <view class="title-text">车辆信息</view>
        <view class="right-line"></view>
      </view>
      <view class="all-info">
        <!-- 行驶证正本 -->
        <view class="info-item">
          <view>
            <image
              v-if="test(imgs[8])"
              class="info-img"
              src="https://qiantu4.oss-cn-hangzhou.aliyuncs.com/wxpic/carinfologo_4.png"
              @click="chooseImg(8)"></image>
            <image
              v-else
              class="info-img"
              mode="aspectFill"
              :src="imgs[8]"
              @click="showImg(imgs[8])"></image>
          </view>
          <view>
            <image 
              class="info-img-title"
              src="https://qiantu4.oss-cn-hangzhou.aliyuncs.com/wxpic/carinfologo_23.png"></image>
          </view>
        </view>
        <!-- 行驶证副本 -->
        <view class="info-item">
          <view>
            <image
              v-if="test(imgs[10])"
              class="info-img"
              src="https://qiantu4.oss-cn-hangzhou.aliyuncs.com/wxpic/carinfologo_4.png"
              @click="chooseImg(10)"></image>
            <image
              v-else
              class="info-img"
              mode="aspectFill"
              :src="imgs[10]"
              @click="showImg(imgs[10])"></image>
          </view>
          <view>
            <image 
              class="info-img-title"
              src="https://qiantu4.oss-cn-hangzhou.aliyuncs.com/wxpic/carinfologo_24.png"></image>
          </view>
        </view>
        <!-- 交强险 -->
        <view class="info-item">
          <view>
            <image
              v-if="test(imgs[11])"
              class="info-img"
              src="https://qiantu4.oss-cn-hangzhou.aliyuncs.com/wxpic/carinfologo_8.png"
              @click="chooseImg(11)"></image>
            <image
              v-else
              class="info-img"
              mode="aspectFill"
              :src="imgs[11]"
              @click="showImg(imgs[11])"></image>
          </view>
          <view>
            <image 
              class="info-img-title"
              src="https://qiantu4.oss-cn-hangzhou.aliyuncs.com/wxpic/carinfologo_35.png"></image>
          </view>
        </view>
      </view>
      <view class="all-info">
        <!-- 整车名牌 -->
        <view class="info-item">
          <view>
            <image
              v-if="test(imgs[2])"
              class="info-img"
              src="https://qiantu4.oss-cn-hangzhou.aliyuncs.com/wxpic/carinfologo_5.png"
              @click="chooseImg(2)"></image>
            <image
              v-else
              class="info-img"
              mode="aspectFill"
              :src="imgs[2]"
              @click="showImg(imgs[2])"></image>
          </view>
          <view>
            <image 
              class="info-img-title"
              src="https://qiantu4.oss-cn-hangzhou.aliyuncs.com/wxpic/carinfologo_36.png"></image>
          </view>
        </view>
        <!-- 底盘铭牌 -->
        <view class="info-item">
          <view>
            <image
              v-if="test(imgs[3])"
              class="info-img"
              src="https://qiantu4.oss-cn-hangzhou.aliyuncs.com/wxpic/carinfologo_6.png"
              @click="chooseImg(3)"></image>
            <image
              v-else
              class="info-img"
              mode="aspectFill"
              :src="imgs[3]"
              @click="showImg(imgs[3])"></image>
          </view>
          <view>
            <image 
              class="info-img-title"
              src="https://qiantu4.oss-cn-hangzhou.aliyuncs.com/wxpic/carinfologo_30.png"></image>
          </view>
        </view>
        <!-- 商业险 -->
        <view class="info-item">
          <view>
            <image
              v-if="test(imgs[12])"
              class="info-img"
              src="https://qiantu4.oss-cn-hangzhou.aliyuncs.com/wxpic/carinfologo_9.png"
              @click="chooseImg(8)"></image>
            <image
              v-else
              class="info-img"
              mode="aspectFill"
              :src="imgs[12]"
              @click="showImg(imgs[8])"></image>
          </view>
          <view>
            <image 
              class="info-img-title"
              src="https://qiantu4.oss-cn-hangzhou.aliyuncs.com/wxpic/carinfologo_25.png"></image>
          </view>
        </view>
      </view>
    </view>
    <view class="all-item">
      <view class="all-title">
        <view class="left-line"></view>
        <view class="title-text">车身外观</view>
        <view class="right-line"></view>
      </view>
      <view class="all-info">
        <!-- 车头侧45度 -->
        <view class="info-item">
          <view>
            <image
              v-if="test(imgs[5])"
              class="info-img"
              src="https://qiantu4.oss-cn-hangzhou.aliyuncs.com/wxpic/carinfologo_11.png"
              @click="chooseImg(5)"></image>
            <image
              v-else
              class="info-img"
              mode="aspectFill"
              :src="imgs[5]"
              @click="showImg(imgs[5])"></image>
          </view>
          <view>
            <image 
              class="info-img-title"
              src="https://qiantu4.oss-cn-hangzhou.aliyuncs.com/wxpic/carinfologo_26.png"></image>
          </view>
        </view>
        <!-- 车尾侧45度 -->
        <view class="info-item">
          <view>
            <image
              v-if="test(imgs[7])"
              class="info-img"
              src="https://qiantu4.oss-cn-hangzhou.aliyuncs.com/wxpic/carinfologo_13.png"
              @click="chooseImg(7)"></image>
            <image
              v-else
              class="info-img"
              mode="aspectFill"
              :src="imgs[7]"
              @click="showImg(imgs[7])"></image>
          </view>
          <view>
            <image 
              class="info-img-title"
              src="https://qiantu4.oss-cn-hangzhou.aliyuncs.com/wxpic/carinfologo_27.png"></image>
          </view>
        </view>
        <!-- 正侧面90度 -->
        <view class="info-item">
          <view>
            <image
              v-if="test(imgs[13])"
              class="info-img"
              src="https://qiantu4.oss-cn-hangzhou.aliyuncs.com/wxpic/carinfologo_17.png"
              @click="chooseImg(13)"></image>
            <image
              v-else
              class="info-img"
              mode="aspectFill"
              :src="imgs[13]"
              @click="showImg(imgs[13])"></image>
          </view>
          <view>
            <image 
              class="info-img-title"
              src="https://qiantu4.oss-cn-hangzhou.aliyuncs.com/wxpic/carinfologo_28.png"></image>
          </view>
        </view>
      </view>
      <view class="all-info">
        <!-- 车头正面 -->
        <view class="info-item">
          <view>
            <image
              v-if="test(imgs[4])"
              class="info-img"
              src="https://qiantu4.oss-cn-hangzhou.aliyuncs.com/wxpic/carinfologo_21.png"
              @click="chooseImg(4)"></image>
            <image
              v-else
              class="info-img"
              mode="aspectFill"
              :src="imgs[4]"
              @click="showImg(imgs[4])"></image>
          </view>
          <view>
            <image 
              class="info-img-title"
              src="https://qiantu4.oss-cn-hangzhou.aliyuncs.com/wxpic/carinfologo_29.png"></image>
          </view>
        </view>
        <!-- 车尾正面 -->
        <view class="info-item">
          <view>
            <image
              v-if="test(imgs[6])"
              class="info-img"
              src="https://qiantu4.oss-cn-hangzhou.aliyuncs.com/wxpic/carinfologo_14.png"
              @click="chooseImg(6)"></image>
            <image
              v-else
              class="info-img"
              mode="aspectFill"
              :src="imgs[6]"
              @click="showImg(imgs[6])"></image>
          </view>
          <view>
            <image 
              class="info-img-title"
              src="https://qiantu4.oss-cn-hangzhou.aliyuncs.com/wxpic/carinfologo_61.png"></image>
          </view>
        </view>
        <!-- 驾驶室内全景 -->
        <view class="info-item">
          <view>
            <image
              v-if="test(imgs[15])"
              class="info-img"
              src="https://qiantu4.oss-cn-hangzhou.aliyuncs.com/wxpic/carinfologo_19.png"
              @click="chooseImg(15)"></image>
            <image
              v-else
              class="info-img"
              mode="aspectFill"
              :src="imgs[15]"
              @click="showImg(imgs[15])"></image>
          </view>
          <view>
            <image 
              class="info-img-title"
              src="https://qiantu4.oss-cn-hangzhou.aliyuncs.com/wxpic/carinfologo_31.png"></image>
          </view>
        </view>
      </view>
    </view>
    <view class="all-item">
      <view class="all-title">
        <view class="left-line"></view>
        <view class="title-text">详细照片</view>
        <view class="right-line"></view>
      </view>
      <view class="all-info">
        <!-- 操控台 -->
        <view class="info-item">
          <view>
            <image
              v-if="test(imgs[16])"
              class="info-img"
              src="https://qiantu4.oss-cn-hangzhou.aliyuncs.com/wxpic/carinfologo_16.png"
              @click="chooseImg(16)"></image>
            <image
              v-else
              class="info-img"
              mode="aspectFill"
              :src="imgs[16]"
              @click="showImg(imgs[16])"></image>
          </view>
          <view>
            <image 
              class="info-img-title"
              src="https://qiantu4.oss-cn-hangzhou.aliyuncs.com/wxpic/carinfologo_32.png"></image>
          </view>
        </view>
        <!-- 控制器 -->
        <view class="info-item">
          <view>
            <image
              v-if="test(imgs[17])"
              class="info-img"
              src="https://qiantu4.oss-cn-hangzhou.aliyuncs.com/wxpic/carinfologo_15.png"
              @click="chooseImg(17)"></image>
            <image
              v-else
              class="info-img"
              mode="aspectFill"
              :src="imgs[17]"
              @click="showImg(imgs[17])"></image>
          </view>
          <view>
            <image 
              class="info-img-title"
              src="https://qiantu4.oss-cn-hangzhou.aliyuncs.com/wxpic/carinfologo_33.png"></image>
          </view>
        </view>
        <!-- 功能细节 -->
        <view class="info-item">
          <view>
            <image
              v-if="test(imgs[18])"
              class="info-img"
              src="https://qiantu4.oss-cn-hangzhou.aliyuncs.com/wxpic/carinfologo_20.png"
              @click="chooseImg(18)"></image>
            <image
              v-else
              class="info-img"
              mode="aspectFill"
              :src="imgs[18]"
              @click="showImg(imgs[18])"></image>
          </view>
          <view>
            <image 
              class="info-img-title"
              src="https://qiantu4.oss-cn-hangzhou.aliyuncs.com/wxpic/carinfologo_34.png"></image>
          </view>
        </view>
      </view>
      <view class="all-info">
        <!-- 功能细节 -->
        <view class="info-item">
          <view>
            <image
              v-if="test(imgs[19])"
              class="info-img"
              src="https://qiantu4.oss-cn-hangzhou.aliyuncs.com/wxpic/carinfologo_20.png"
              @click="chooseImg(19)"></image>
            <image
              v-else
              class="info-img"
              mode="aspectFill"
              :src="imgs[19]"
              @click="showImg(imgs[19])"></image>
          </view>
          <view>
            <image 
              class="info-img-title"
              src="https://qiantu4.oss-cn-hangzhou.aliyuncs.com/wxpic/carinfologo_34.png"></image>
          </view>
        </view>
        <!-- 功能细节 -->
        <view class="info-item">
          <view>
            <image
              v-if="test(imgs[20])"
              class="info-img"
              src="https://qiantu4.oss-cn-hangzhou.aliyuncs.com/wxpic/carinfologo_20.png"
              @click="chooseImg(20)"></image>
            <image
              v-else
              class="info-img"
              mode="aspectFill"
              :src="imgs[20]"
              @click="showImg(imgs[20])"></image>
          </view>
          <view>
            <image 
              class="info-img-title"
              src="https://qiantu4.oss-cn-hangzhou.aliyuncs.com/wxpic/carinfologo_34.png"></image>
          </view>
        </view>
        <!-- 添加照片 -->
        <view class="info-item">
          <view>
            <image
              v-if="test(imgs[21])"
              class="info-img"
              src="https://qiantu4.oss-cn-hangzhou.aliyuncs.com/wxpic/carinfologo_22.png"
              @click="chooseImg(21)"></image>
            <image
              v-else
              class="info-img"
              mode="aspectFill"
              :src="imgs[21]"
              @click="showImg(imgs[21])"></image>
          </view>
          <view>
            <image 
              class="info-img-title"
              src="https://qiantu4.oss-cn-hangzhou.aliyuncs.com/wxpic/orderslogo16.png"></image>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import {uploadImg} from '@/api/uploadFile'
  export default {
    data() {
      return {
        id:0,
        imgs:[],
        showImgs:[]
      }
    },
    onLoad(option) {
      this.load(option);
    },
    computed:{
    },
    mounted() {
      var t = [];
      t[1] = 12;
      t[4] = 123;
    },
    methods: {
      load:function(option) {
        var data = JSON.parse(decodeURIComponent(option.obj));
        this.id = data.id;
        this.imgs = data.imgs;
        this.updateShowImgs(data.imgs)
      },
      updateShowImgs:function (imgs) {
        var tmp = [8,10,11,2,3,12,5,7,13,4,6,15,16,17,18,19,20,21]
        var show = [];
        for(let img of tmp) {
          if(imgs[img] != null) {
            show.push(imgs[img]);
          }
        }
        this.showImgs = show;
      },
      test(key) {
        if(key == null) {
          return true;
        }
      },
      chooseImg:function(type) {
        var that = this;
        uni.chooseImage({
          count:1,
          sourceType:['camera'],
          success:function(res){
            uploadImg(res.tempFilePaths[0],type,that.id).then(response => {
              var _data = JSON.parse(response[1].data);
              if(_data.status == 200) {
                that.imgs[type] = _data.data;
                uni.showToast({
                  title:'上传成功'
                })
                that.updateShowImgs(that.imgs);
              }else {
                uni.showToast({
                  icon:'error',
                  title:'上传失败'
                })
              }
            }).catch(error => {
              uni.showToast({
                icon:'error',
                title:'发生错误'
              })
            })
          }
        })
      },
      showImg:function(url) {
        console.log(url)
        var that = this;
        uni.previewImage({
          current:url,
          urls:that.showImgs,
          fail(err) {
            console.log(err)
          }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .all-truck-img {
    padding: 0 24rpx 50rpx 24rpx;
    .all-item {
      margin-top: 40rpx;
      .all-title {
        display: flex;
        justify-content: space-between;
        .left-line {
          width: 522rpx;
          height: 23rpx;
          border-bottom: 2rpx dashed rgba(170, 170, 170, 1);
        }
        .title-text {
          height: 40rpx;
          line-height: 40rpx;
          font-size: 28rpx;
          color: rgba(51, 51, 51, 1);
          font-weight: 500;
        }
        .right-line {
          width: 40rpx;
          height: 23rpx;
          border-bottom: 2rpx dashed rgba(170, 170, 170, 1);
        }
      }
      .all-info {
        display: flex;
        justify-content: space-between;
        margin-top: 20rpx;
        .info-item {
          width: 220rpx;
          height: 220rpx;
          overflow: hidden;
          border-radius: 12rpx;
          .info-img {
            width: 220rpx;
            height: 220rpx;
            
          }
          .info-img-title {
            width: 220rpx;
            height: 70rpx;
            position: relative;
            top: -77rpx;
          }
        }
      }
    }
  }
</style>
